﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="../static/css/public.css"/>
    <link rel="stylesheet" href="../static/css/style.css"/>
    <script  src="../static/detail/style/js/jquery.js"></script>
    <script  src="../static/detail/style/js/page_common.js"></script>
    <script>
        // $(function (){
        //     query(1);
        // })
        $(function () {
            $.ajax({
                type:'post',
                url: "/user/query",
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                success:function (res) {
                    // 回调函数：显示table，先清空tbody 在循环json数组，在拼接tr，再追加到tbody中
                    var _t ='';
                    $('#tb').empty();
                    $.each(res,function (i,v) {
                        _t =_t + '<tr><td>'+v.id+'</td><td>'+v.name+'</td><td>'+v.sex+'</td><td>'+v.age+'</td><td>'+v.phone+'</td><td>'+v.address+'</td><td>'+v.usertype+'</td><td><a href="javascript:del('+v.id+')" ><img src="../static/img/schu.png" alt="删除" title="删除"/></a>|<a href="javascript:edit('+v.id+')" ><img src="../static/img/xiugai.png" alt="修改" title="修改"/></a></td></tr>';
                    });
                    $("#tb").append(_t);
                }
            });
        })
        function edit(v) {
            window.location.href="userUpdate.html?id="+v;

        }
        function del(v){
            $.ajax({
                type: 'post',
                url:  '/user/delete',
                data:{"id":v},
                success: function (res) {
                    window.location.href="userList.html";
                }
            });
        }
        function query(){
            var name= $("#name").val();
            $.ajax({
                type:'post',
                url: "/user/query",
                dataType:"json",
                data:{'name':name},
                success:function (res) {
                    alert(res)
                    var _t ='';
                    $('#tb').empty();
                    $.each(res,function (i,v) {
                        _t =_t + '<tr><td>'+v.id+'</td><td>'+v.name+'</td><td>'+v.sex+'</td><td>'+v.age+'</td><td>'+v.phone+'</td><td>'+v.address+'</td><td>'+v.usertype+'</td><td><a href="javascript:del('+v.id+')" ><img src="../static/img/schu.png" alt="删除" title="删除"/></a>|<a href="javascript:edit('+v.id+')" ><img src="../static/img/xiugai.png" alt="修改" title="修改"/></a></td></tr>';
                    });
                    $("#tb").append(_t);
                }
            });
        }
    </script>
</head>
<body>
<!--头部-->
    <header class="publicHeader">
        <h1>超市账单管理系统</h1>
        <div class="publicHeaderR">
            <p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>

            <a href="../login.html">退出</a>
        </div>
    </header>
<!--时间-->
    <section class="publicTime">
        <span id="time">2015年1月1日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
<!--主体内容-->
    <section class="publicMian ">
        <div class="left">
            <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
            <nav>
                <ul class="list">
                    <li><a href="../billList.html">账单管理</a></li>
                    <li><a href="../providerList.html">供应商管理</a></li>
                    <li  id="active"><a href="userList.html">用户管理</a></li>
                    <li><a href="../password.html">密码修改</a></li>
                    <li><a href="../login.html">退出系统</a></li>
                </ul>
            </nav>
        </div>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面</span>
            </div>
            <form>
            <div class="search">
                <span>用户名：</span>
                <input type="text" name="name" id="name" placeholder="请输入用户名"/>
                <input type="button" onclick="query(1)" value="查询"/>
                <a href="../userAdd.html">添加用户</a>
            </div>
            </form>
            <!--用户-->
            <table class="providerTable" cellpadding="0" cellspacing="0">
                <thead>
                <tr class="firstTr">
                    <th width="10%">用户编码</th>
                    <th width="20%">用户名称</th>
                    <th width="10%">性别</th>
                    <th width="10%">年龄</th>
                    <th width="10%">电话</th>
                    <th width="10%">地址</th>
                    <th width="10%">用户类型</th>
                    <th width="30%">操作</th>
                </tr>
                </thead>
<!--                <tr>-->
<!--                    <td>-->
<!--                        <a href="userView.html"><img src="static/img/read.png" alt="查看" title="查看"/></a>-->
<!--                        <a href="userUpdate.html"><img src="static/img/xiugai.png" alt="修改" title="修改"/></a>-->
<!--                        <a href="#" class="removeUser"><img src="static/img/schu.png" alt="删除" title="删除"/></a>-->
<!--                    </td>-->
<!--                </tr>-->
                <tbody id="tb">
                </tbody>
            </table>

        </div>
    </section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该用户吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>

    <footer class="footer">
    </footer>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/js.js"></script>
<script src="../static/js/time.js"></script>

</body>
</html>